<template>
  <div class="app-container">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="规则名称">
        <el-input v-model="formInline.name" placeholder="请输入规则名称" size="small" clearable></el-input>
      </el-form-item>
      <el-form-item label="创建部门">
        <el-select v-model="formInline.dept" placeholder="请输入部门名称" size="small" clearable>
          <el-option label="项目建设部" value="项目建设部"></el-option>
          <el-option label="生产运行部" value="生产运行部"></el-option>
          <el-option label="市场管理部门" value="市场管理部门"></el-option>
          <el-option label="安全环保监管部" value="安全环保监管部"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="searchRules">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" style="margin-bottom: 8px">
      <el-col >
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd()"
        >新建</el-button>
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multipleSelection"
          @click="handleDelete()"
        >删除</el-button>
      </el-col>
    </el-row>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="codeID"
        label="编码ID"
        align="center">
      </el-table-column>
      <el-table-column
        prop="ruleName"
        label="规则名称"
        align="center">
      </el-table-column>
      <el-table-column
        prop="createDate"
        label="创建时间"
        align="center">
      </el-table-column>
      <el-table-column
        prop="createDept"
        label="创建部门"
        align="center">
      </el-table-column>
      <el-table-column
        prop=""
        label="操作"
        align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >编辑</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDeleteRow(scope.$index)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="100"
      layout="total, sizes, prev, pager, next"
      :total="100"
      style="margin-top: 30px;margin-left: 500px">
    </el-pagination>
    <!-- 点击新增，弹出对话框   -->
    <el-dialog title="创建编码规则" :visible.sync="dialogFormVisible" width="500px">
      <el-form :model="form" label-width="80px">
        <el-form-item label="规则名称" >
          <el-input v-model="form.ruleName" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="创建部门" >
          <el-select v-model="form.createDept" placeholder="请选择部门" >
            <el-option label="项目建设部" value="项目建设部"></el-option>
            <el-option label="生产运行部" value="生产运行部"></el-option>
            <el-option label="市场管理部门" value="市场管理部门"></el-option>
            <el-option label="安全环保监管部" value="安全环保监管部"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="submitForm()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { delPost } from '@/api/system/post'

export default {
  name: 'Rules',
  data() {
    return {
      formInline: {
        name: '',
        dept: ''
      },
      tableData: [{
        codeID: 'A001',
        ruleName: '规则A',
        createDate: '2016-05-03',
        createDept: '项目建设部'
      }, {
        codeID: 'A002',
        ruleName: '规则B',
        createDate: '2016-05-03',
        createDept: '生产运行部'
      }, {
        codeID: 'A003',
        ruleName: '规则B',
        createDate: '2016-05-03',
        createDept: '市场管理部门'
      }, {
        codeID: 'A004',
        ruleName: '规则C',
        createDate: '2016-05-03',
        createDept: '市场管理部门'
      }, {
        codeID: ' B001',
        ruleName: '规则D',
        createDate: '2016-05-03',
        createDept: '项目建设部'
      }, {
        codeID: 'A002',
        ruleName: '规则B',
        createDate: '2016-05-03',
        createDept: '项目建设部'
      }, {
        codeID: 'A003',
        ruleName: '规则B',
        createDate: '2016-05-03',
        createDept: '生产运行部'
      }, {
        codeID: 'A004',
        ruleName: '规则C',
        createDate: '2016-05-03',
        createDept: '安全环保监管部'
      }],
      // 选中数组
      ids: [],
      multipleSelection: true,
      currentPage: 1,
      // 弹出框表单相关数据
      dialogFormVisible: false,
      form: {
        ruleName: '',
        createDept: ''
      }
    }
  },
  methods: {
    searchRules() {
      console.log('submit!');
    },
    // 新建按钮
    handleAdd() {
      this.reset()
      this.dialogFormVisible = true
    },
    // 删除按钮 多选删除
    handleDelete() {
      var rulesIds =  this.ids;
      this.$modal.confirm('是否确认删除编码ID为"' + rulesIds + '"的数据项？').then(function() {
        console.log(rulesIds)
      }).then(() => {
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      // 将选中的存入数组ids
      this.ids = selection.map(item => item.codeID)
      // multipleSelection为true时disabled为true，不可点击按钮
      this.multipleSelection = !selection.length;
    },
    // 修改编辑按钮
    handleUpdate() {

      this.$router.push('/workbench/edit/12')
    },
    // 删除表格一行
    handleDeleteRow(index) {
       this.tableData.splice(index,1)
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // 确认提交按钮
    submitForm() {
      this.dialogFormVisible = false
      // 在表格最上方新增一行
      this.tableData.splice(0,0,{
        codeID: 'H666',
        ruleName: this.form.ruleName,
        createDate: '2016-05-14',
        createDept: this.form.createDept
      })
    },
    // 取消按钮
    cancel() {
      this.dialogFormVisible =  false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        ruleName: undefined,
        createDept: undefined
      }
    }
  }
}
</script>

<style scoped>

</style>
